@model WalkingTec.Mvvm.Core.BaseVM
<style>
    a {
        color: #01aaed
    }
</style>
<p></p>
<p>我们通过重写ListVM中的InitGridAction()方法来定义列表上的功能按钮</p>
<p></p>
<wt:fieldset field-set-style="Simple" title="功能按钮的行为">
</wt:fieldset>
  <wt:quote>
    <p>通过ShowDialog和IsDirect两个属性的组合可以控制点击按钮后如何展示页面</p>
    <p>通过ShowInRow和HideOnToolBar来控制按钮显示在列表上方还是每行都显示</p>
  </wt:quote>
  <table lay-filter="parse-table-demo">
    <thead>
      <tr>
        <th lay-data="{field:'username', width:400}">属性</th>
        <th lay-data="{field:'joinTime', width:400}">行为</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>IsRedirect=false,ShowDialog=true</td>
        <td>弹出模式对话框展现页面</td>
      </tr>
      <tr>
        <td>IsRedirect=false,ShowDialog=false</td>
        <td>不弹出任何页面，只是在后台调用方法并执行方法返回的js</td>
      </tr>
      <tr>
        <td>IsRedirect=true,ShowDialog=true</td>
        <td>打开新的浏览器窗口显示页面</td>
      </tr>
      <tr>
        <td>IsRedirect=true,ShowDialog=false</td>
        <td>在当前页或者显示页面，如果是Tab模式则在新Tab页上显示</td>
      </tr>
      <tr>
        <td>OnClickScript</td>
        <td>
          如果设置了OnClickScript，则框架运行指定的js方法<br/>
          比如设置SetOnClickScript("test")，点击按钮时框架会调用页面上的javascript方法: function test(ids,datas){}<br/>
          ids是勾选的id数组，datas是勾选的所有字段数组
        </td>
      </tr>
      <tr>
        <td>ShowInRow=true</td>
        <td>按钮在每行的操作列上都显示</td>
      </tr>
      <tr>
        <td>HideOnToolBar=true</td>
        <td>按钮不在列表上方显示</td>
      </tr>
    </tbody>
  </table>
  <wt:quote>列表按钮的默认行为显示在列表上方，点击后弹出模式对话框显示页面</wt:quote>
  <p>以下代码片段展示了按钮的多种设置方法</p>
  <wt:code title="InitGridAction">
protected override List&lt;GridAction&gt; InitGridAction()
{
    var actions = new List&lt;GridAction&gt;
  {
    //调用页面上的名为test(ids,datas)的js方法
    this.MakeAction(null,null,"ScriptButton",null, GridActionParameterTypesEnum.NoId).SetOnClickScript("test"),

    //默认弹出对话框，并在每行显示按钮。通过whereStr指定将当前数据的ModelName字段的值拼接到url中,通过SetQueryString将固定的字符串拼到url中
    //下面这个语句最终访问的url为 ： /_Admin/ActionLog/Details?id=xxx&ModelName=xxx&a=1
    this.MakeAction("ActionLog","Details","详情(Dialog)","Details dialog", GridActionParameterTypesEnum.SingleId,"_Admin",whereStr:x=>x.ModuleName).SetShowInRow(true).SetQueryString("a=1"),

    //设置IsRedirect和ShowDialog为true，弹出新浏览器窗口，并在每行显示按钮
    this.MakeAction("ActionLog","Details","详情(新窗口)","Details new window", GridActionParameterTypesEnum.SingleId,"_Admin").SetShowDialog(true).SetIsRedirect(true).SetShowInRow(true).SetQueryString("a=2"),

    //设置IsRedirect为true，ShowDialog为false，在本窗口或tab页上显示，并在每行显示按钮
    this.MakeAction("ActionLog","Details","详情(本窗口)","Details new window", GridActionParameterTypesEnum.SingleId,"_Admin").SetShowDialog(false).SetIsRedirect(true).SetShowInRow(true).SetQueryString("a=3"),
  };
  return actions;
}
</wt:code>

<wt:fieldset field-set-style="Simple" title="功能按钮的其他设置">
</wt:fieldset>
  <p>通过MakeAction和MakeStandardAction方法来创建功能按钮时，可以使用流函数SetXXX来对按钮进行更多设置</p>
  <p>功能按钮可以设置的属性有：</p>
      <table lay-filter="parse-table-demo">
        <thead>
            <tr>
                <th lay-data="{field:'username', width:200}">属性</th>
                <th lay-data="{field:'joinTime', width:400}">描述</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>areaName</td>
                <td>按钮调用的Area名称，如果没有Area就为空</td>
            </tr>
            <tr>
                <td>controllerName</td>
                <td>按钮调用的Controller名称</td>
            </tr>
            <tr>
                <td>actionName</td>
                <td>按钮调用的方法名称</td>
            </tr>
            <tr>
                <td>name</td>
                <td>按钮上的文字</td>
            </tr>
            <tr>
                <td>dialogTitle</td>
                <td>弹出窗口的标题</td>
            </tr>
            <tr>
                <td>paraType</td>
                <td>
                    参数类型。
                </td>
            </tr>
            <tr>
                <td>dialogWidth</td>
                <td>弹出窗口的宽度，可为空</td>
            </tr>
            <tr>
                <td>dialogHeight</td>
                <td>弹出窗口的高度，可为空</td>
            </tr>
            <tr>
                <td>IconCls</td>
                <td>按钮的图标，指定css文件中的某个 class</td>
            </tr>
            <tr>
                <td>IsDownload</td>
                <td>是否为下载按钮，下载按钮指向的url应该返回文件</td>
            </tr>

            <tr>
                <td>ShowDialog</td>
                <td>是否需要弹出窗口。有的按钮不需要弹出窗口，如果不弹窗口，则框架只会在后台调用指定方法</td>
            </tr>
            <tr>
                <td>ShowInRow</td>
                <td>按钮是否要出现在每一行的操作列上</td>
            </tr>
            <tr>
                <td>BindVisiableColName</td>
                <td><p>用于根据行内数据判断是否显示行内按钮</p>
                    <p>对于ShowInRow的动作，绑定一个字符串格式的隐藏列的列名，当该隐藏列返回字符串'true'的时候，行内按钮才显示</p>
                </td>
            </tr>
            <tr>
                <td>HideOnToolBar</td>
                <td>列表上方的按钮条是否应该隐藏这个按钮</td>
            </tr>
            <tr>
                <td>Max</td>
                <td>当ShowDialog=true时，指定弹出窗口是否默认最大化</td>
            </tr>
            <tr>
                <td>WhereStr</td>
                <td>指定列表中的某一列，当按钮需要单一ID的时候，指定列的数据也会随id一起拼接到url中</td>
            </tr>

        </tbody>
    </table>


<wt:fieldset field-set-style="Simple" title="根据行内数据显示或隐藏按钮">
</wt:fieldset>
  <p>所有行内显示的动作按钮，都可以根据本行的其他字段来控制是否显示</p>
  <p>具体方法是对某个按钮调用BindVisiableColName方法，设置某个隐藏列的名字，如果该隐藏列返回字符串'true'，那么这个动作按钮才会显示</p>
  <p>请看下面的例子</p>
    <wt:code title="InitGridAction">
        protected override List&lt;GridAction&gt; InitGridAction()
        {
            return new List&lt;GridAction&gt;
            {
                this.MakeStandardAction("MyUser", GridActionStandardTypesEnum.Create, "新建","", dialogWidth: 800),
                //使用SetBindVisiableColName方法将修改按钮是否显示关联到CanEdit这个列上
                this.MakeStandardAction("MyUser", GridActionStandardTypesEnum.Edit, "修改","", dialogWidth: 800).SetBindVisiableColName("CanEdit"),
                this.MakeStandardAction("MyUser", GridActionStandardTypesEnum.Delete, "删除", "",dialogWidth: 800),
                this.MakeStandardAction("MyUser", GridActionStandardTypesEnum.Details, "详细","", dialogWidth: 800),
                this.MakeStandardAction("MyUser", GridActionStandardTypesEnum.BatchEdit, "批量修改","", dialogWidth: 800),
                this.MakeStandardAction("MyUser", GridActionStandardTypesEnum.BatchDelete, "批量删除","", dialogWidth: 800),
                this.MakeStandardAction("MyUser", GridActionStandardTypesEnum.Import, "导入","", dialogWidth: 800),
                this.MakeStandardAction("MyUser", GridActionStandardTypesEnum.ExportExcel, "导出","")
            };
        }

        protected override IEnumerable&lt;IGridColumn&lt;MyUser_View&gt;&gt; InitGridHeader()
        {
            return new List&lt;GridColumn&lt;MyUser_View&gt;&gt;{
                this.MakeGridHeader(x =&gt; x.ITCode),
                this.MakeGridHeader(x =&gt; x.Name),
                //添加一个叫做CanEdit的列，使用SetHide方法使其隐藏，使用SetFormat函数根据本行数据来决定返回true或者false
                this.MakeGridHeader(x=&gt;"CanEdit").SetHide().SetFormat((e,v)=&gt;{
                    if (e.Sex == SexEnum.Male){
                        return "true";
                    }
                    else {
                        return "false";
                    }
                }),
                this.MakeGridHeaderAction(width: 200)
            };
        }
</wt:code>
  <wt:quote>
    <p>以上代码演示了将修改按钮绑定到模型中并不存在的叫CanEdit这个隐藏列上，然后CanEdit列判断行内数据返回true或者false来控制这行的修改按钮是否显示</p>
    <p>上面代码的效果就是用户是男性就显示修改按钮，女性就不显示</p>
    <p>请注意MakeGridHeader方法除了可以绑定某个字段之外，也可以使用上面代码所展示的，直接输出某个模型中不存在的字段</p>
  </wt:quote>

<wt:fieldset field-set-style="Simple" title="功能按钮获取列表数据">
  </wt:fieldset>
  <wt:quote>
    <p>在调用MakeAction方法时，通过GridActionParameterTypesEnum来设定按钮是否需要列表数据</p>
  </wt:quote>
  <table lay-filter="parse-table-demo">
    <thead>
      <tr>
        <th lay-data="{field:'username', width:400}">属性</th>
        <th lay-data="{field:'joinTime', width:450}">描述</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>GridActionParameterTypesEnum.NoId</td>
        <td>点击按钮时不需要获取列表数据的id，比如新建按钮</td>
      </tr>
      <tr>
        <td>GridActionParameterTypesEnum.SingleId</td>
        <td>按钮会获取勾选的一行数据的id调用新方法，比如修改按钮</td>
      </tr>
      <tr>
        <td>GridActionParameterTypesEnum.MultiIds</td>
        <td>按钮会获取勾选的多行数据的id调用新方法，比如批量修改，批量删除(注意MultiIds的时候框架会使用标记为[Post]的方法)</td>
      </tr>
      <tr>
        <td>GridActionParameterTypesEnum.SingleIdWithNull</td>
        <td>可以勾选一行，也可以不选</td>
      </tr>
      <tr>
        <td>GridActionParameterTypesEnum.MultiIdWithNull</td>
        <td>可以勾选多行，也可以不选(注意MultiIds的时候框架会使用标记为[Post]的方法)</td>
      </tr>
      <tr>
        <td>GridActionParameterTypesEnum.AddRow</td>
        <td>用于可编辑列表中添加一行</td>
      </tr>
      <tr>
        <td>GridActionParameterTypesEnum.RemoveRow</td>
        <td>用于可编辑列表中删除一行</td>
      </tr>
    </tbody>
  </table>
    <script>
    layui.use('code',function(){layui.code({ about: false })})
    </script>
    <script>
        layui.table.init('parse-table-demo', {
        limit: 100, page: false
        });
    </script>
<script>
  $("#@Model.ViewDivId").parent().css("height", "auto");
</script>
